<template>
  <el-dialog
    :visible="showDialog"
    :title="dialogTitleName"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <el-form ref="form" label-width="160px" :model="queryData" :rules="rules">
      <el-form-item label="链接类型" prop="type">
        <el-select
          v-model="queryData.type"
          style="width: 400px"
          placeholder="请输入链接类型"
        >
          <el-option
            v-for="item in typeList"
            :key="+item.type"
            :label="item.name"
            :value="item.type"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="showTitle" label="标题" prop="title">
        <el-input
          v-model="queryData.title"
          style="width: 400px"
          placeholder="请输入标题名称"
        />
      </el-form-item>
      <el-form-item label="链接地址" prop="url">
        <el-input
          v-model="queryData.url"
          style="width: 400px"
          placeholder="请输入链接地址名称"
        />
      </el-form-item>
      <el-form-item label="链接描述" prop="des">
        <el-input
          v-model="queryData.des"
          style="width: 400px"
          placeholder="请输入链接描述"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-form-item v-if="showImgUpload" label="链接图片">
        <upload-img ref="uploadImg" :img="queryData.img">
          <el-button size="small" type="primary">点击上传</el-button>
        </upload-img>
      </el-form-item>
      <el-row type="flex" justify="center">
        <el-button size="small" type="primary" @click="btnOK">确定</el-button>
        <el-button size="small" @click="closeDialog">取消</el-button>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { addAdvLinkApi, getAdvLinkDetailApi, editAdvLinkApi } from '@/api/adv/link'
export default {
  name: 'AdvlinkDialog',
  data() {
    return {
      showDialog: false,
      queryData: {
        des: '',
        img: '',
        title: '',
        type: '',
        url: ''
      },
      // 类型
      typeList: [
        { type: '1', name: '文字链接' },
        { type: '2', name: '图片链接' }
      ],
      // 校验规则
      rules: {
        type: [{ required: true, message: '请选择', trigger: 'change' }],
        des: [{ required: true, message: '请输入', trigger: 'blur' }],
        url: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 新增控制上传按钮的显示隐藏
    showImgUpload() {
      return this.queryData.type === '2'
    },
    // 新增控制标题的显示隐藏
    showTitle() {
      return this.queryData.type === '1'
    },
    // 控制弹框表格名称
    dialogTitleName() {
      return this.queryData.id ? '修改友情链接' : '添加友情链接'
    }
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.showDialog = false
      this.queryData = {
        des: '',
        img: '',
        title: '',
        type: '',
        url: ''
      }
      this.$refs.form.resetFields()
    },
    // 添加
    async btnOK() {
      // 判断是否类型是否是图片类型
      if (this.queryData.type === '2') {
        this.queryData.img = this.$refs.uploadImg.fileList[0].realtiveUrl
      }
      try {
        await this.$refs.form.validate()
      } catch (error) {
        return console.log(error)
      }
      if (this.queryData.id) {
        await editAdvLinkApi(this.queryData)
        this.$message.success('修改成功')
      } else {
        await addAdvLinkApi(this.queryData)
        this.$message.success('添加成功')
      }
      this.closeDialog()
      this.$emit('updata')
    },
    // 详情信息回显
    async getAdvlinkDetail(id) {
      this.showDialog = true
      const { data: res } = await getAdvLinkDetailApi(id)
      this.queryData = res
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
